<template>
	<div class="container bg-w h100">
		<van-list :immediate-check="false" v-model="tab.loading" :finished="tab.finished" finished-text="没有更多了" @load="scrollEvent">
			<mitem v-for="item in tab.dataList" v-if="tab.dataList.length" :videoItem="item" @delFun="delFun" />
			</mitem>
		</van-list>
	</div>
</template>

<script>
	import {
		List,
		Cell,
		Dialog,
		Notify
	} from 'vant';
	import mitem from '@/components/mitem.vue'
	import {
		getShortList,
		delShort
	} from '@/api/permission'
	export default {
		data() {
			return {
				tab: {
					dataList: [],
					loading: false,
					finished: false,
					pending: false,
					page: {
						num: 0,
						size: 99,
						total: null
					}
				}
			}
		},
		components: {
			[List.name]: List,
			mitem
		},
		methods: {
			getShortListFun() {
				let self = this
				let tablist = self.tab
				let page = tablist.page
				getShortList({
					index: page.num, // 页码
					size: page.size, // 每页长度
				}).then((response) => {
					// 请求的列表数据
					let arr = response.content
					// // 如果是第一页需手动置空列表
					if (page.num === 0) tablist.dataList = []
					// // 把请求到的数据添加到列表
					tablist.dataList = tablist.dataList.concat(arr)
					tablist.loading = false
					tablist.pending = false
					if (page.num == response.totalPages) {
						tablist.finished = true
					}
					tablist.page = {
						num: response.currentPage,
						total: response.totalPages,
						size: page.size
					}
					self.first = false
				}).catch(() => {

				})
			},
			scrollEvent() {
				let self = this
				let tablist = self.tab
				let page = tablist.page
				if (!tablist.pending && tablist.dataList.length) {
					if ((page.num + 1) == page.total) {
						tablist[`finished`] = true
						tablist[`loading`] = false
						tablist[`pending`] = false
					} else {
						tablist.page.num++
						tablist[`pending`] = true
						self.getShortListFun()
					}
				}
			},
			delFun(e) {
				let self = this 
				Dialog.confirm({
					title: '提示',
					message: '确认要删除么'
				}).then(() => {
					delShort(e).then(res => {
						Notify({
							type: 'success',
							message: '删除成功'
						});
						self.tab = {
							dataList: [],
							loading: false,
							finished: false,
							pending: false,
							page: {
								num: 0,
								size: 99,
								total: null
							}
						}
						self.getShortListFun()
					})
				}).catch((err) => {
					// on cancel
					console.log(err)
				});
			}
		},
		mounted() {
			let self = this
			self.getShortListFun()
		},
	};
</script>

<style lang="less">

</style>
